  const tbody = document.querySelector('tbody')
async function getStudentList() {
 const res =  await axios({url:'student/list'})
	
	const data = res.data.data.reduce((a,{id,name,age,sex, group,phone,salary,truesalary,province,city, county})=>a+`<tr>
						<th scope="row">${id}</th>
						<td>${name}</td>
						<td>${age}</td>
						<td>${sex}</td>
						<td>${group}</td>
						<td>${phone}</td>
						<td>${salary}</td>
						<td>${truesalary}</td>
						<td>${province+city+county}</td>
						<td>
						<button type="button"  data-id='${id}' class="btn btn-primary btn-sm">修改</button>
						<button type="button"  data-id='${id}' class="btn btn-danger btn-sm">删除</button>
						</td>
					</tr>`, '')
					tbody.innerHTML=data
}
getStudentList()

const formList = document.querySelector('form')//获取所有form内的数据
const showModalBtn = document.querySelector('.show-modal-btn')//添加按钮
const modal = new bootstrap.Modal("#addModal");//获取他的模态框
// 添加点击事件 打开模态框
showModalBtn.addEventListener('click',function(e){
	modal.show()
	formList.reset()
	document.querySelector('#addModalLabel').innerText = '添加学员信息'
})

const provinceRes =document.querySelector('[name="province"]')//省
const cityRes =document.querySelector('[name="city"]')//城市
const countyRes = document.querySelector('[name="county"]')//地区
// 获取省的数据
async function getGeoProvince() {
	const res = await axios({ url: 'geo/province' })
	const province = res.data.reduce((a, b) => a + `
	<option  value="${b}">${b}-</option>`, '')
	provinceRes.innerHTML=`<option  value="">--省--</option>`+province
}
getGeoProvince()
// 获取城市数据
provinceRes.addEventListener('change',async function(e){
	const res = await axios({ url: 'geo/city', params: { pname: provinceRes.value } })
	// console.log(res);
	const city =res.data.reduce((a, b) => a + `<option  value="${b}">${b}-</option>`, '')
	cityRes.innerHTML=`<option  value="">--城市--</option>`+city
})
// 获取地区数据
cityRes.addEventListener('change',async function(e){
	const res = await axios({ url: 'geo/county', params: { pname: provinceRes.value ,cname:cityRes.value} })
	// console.log(res);
	const county =res.data.reduce((a, b) => a + `<option  value="${b}">${b}-</option>`, '')
	countyRes.innerHTML=`<option  value="">--城市--</option>`+county
})
// 添加数据
formList.addEventListener('submit',async function (e) {
	e.preventDefault()
	const data = serialize(formList, { hash: true, empty: true })
	console.log(data,11111);
	 for (const key in data) {
	    if (!data[key]) {
			 toastr.error('请输入内容')
			 return
		 }
	}
     let url =''
     let method =''
	if (document.querySelector('#addModalLabel').innerText === '添加学员信息') {
		delete data.id
		url = 'student/add',
		method='post'	
	} else {
		url = 'student/update',
		method='put'
	}


	 await axios({ url, method, data })
	 modal.hide()
	getStudentList()
	toastr.success('操作成功')
	
})
formList.addEventListener('reset',function(e){
	cityRes.innerHTML = `<option  value="">--城市--</option>`
	countyRes.innerHTML=`<option  value="">--城市--</option>`
})
// 编辑和 删除
tbody.addEventListener('click',async function(e){
	if (e.target.classList.contains('btn-primary')) {
		modal.show()
		document.querySelector('#addModalLabel').innerText = '编辑学员信息'
		const id= e.target.dataset.id
		const res = await axios({ url: 'student/one', params: { id } })
		document.querySelector(`[name="sex"][value='${res.data.data.sex}']`).checked = true
		
		//  二次渲染城市
        const citylist = await axios({ url: 'geo/city', params: { pname:res.data.data.province } })
		const city =citylist.data.reduce((a, b) => a + `<option selected value="${b}">${b}-</option>`,'')
		cityRes.innerHTML = `<option selected value="">--城市--</option>` + city
		
	   //  二次渲染地区
		const countylist = await axios({ url: 'geo/county', params: { pname: res.data.data.province  ,cname:res.data.data.city} })
		const county =countylist.data.reduce((a, b) => a + `<option selected value="${b}">${b}-</option>`, '')
		countyRes.innerHTML=`<option selected value="">--城市--</option>`+county

		const names = formList.querySelectorAll('[name]')
		names.forEach(item => {
			if (item.name !== 'sex') {
				item.value=res.data.data[item.name]
			}
		});
		
	}else
    // 删除  
	if (e.target.classList.contains('btn-danger')) {
		const id = e.target.dataset.id
		console.log(id);
		if (!confirm('您确定删除吗？')) {
			return
		}
		const res = axios({ url: '/student/delete',method:'delete', params: { id } })
		console.log(res);
		toastr.success('删除成功')
		getStudentList()

	}
})